<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="20" >
                <div style="margin-left:20px;font-weight: bolder;color:#666">添加文章</div>
            </el-col>

            <el-col :span="4">
                <el-button @click="go">返回列表</el-button>
            </el-col>
        </el-row>

        <el-form  ref="form" :model="form" label-position="labelPosition" label-width="100px">
            <el-form-item label="栏目" >
                <!--<el-select  style="border:1px solid #fff">-->
                    <!--<el-option :label="1" :value="1" ></el-option>-->
                    <!--<el-option :label="1" :value="1" ></el-option>-->
                <!--</el-select>-->
                <div>
                    {{lam}}
                </div>
            </el-form-item>
            <el-form-item label="文章标题" >
                <!--<el-input style="width:300px" v-model="form.title"></el-input>-->
                <div>{{form.title}}</div>
            </el-form-item>

            <el-form-item label="副标题" >
                <!--<el-input style="width:300px" v-model="form.subtitle"></el-input>-->
                <div>{{form.subtitle}}</div>
            </el-form-item>
            <el-form-item label="文章摘要" >
                <!--<el-input-->
                        <!--type="textarea"-->
                        <!--:rows="3"-->
                        <!--placeholder="文章摘要"-->
                        <!--v-model="form.abstracts" style="width:300px">-->
                <!--</el-input>-->
                <div>{{form.abstracts}}</div>
            </el-form-item>
            <el-form-item label="来源" >
                <!--<el-input style="width:300px" v-model="form.source"></el-input>-->
                <div>{{form.source}}</div>
            </el-form-item>
        </el-form>
        <div style="margin-bottom:20px;margin-left:45px;font-size:16px;color:#666">缩略图</div>
        <div style="margin-left:100px">
            <el-upload
                    class="avatar-uploader"
                    :action=fileUploadAction

                    readonly="readonly"disabled>
                <img v-if="imageUrl" :src=imageUrl class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <!--<div slot="tip" class="el-upload__tip">（支持png/jpg格式，文件大小不能超过3M）</div>-->
            </el-upload>
        </div>
        <div style="margin-bottom:20px;margin-left:45px;font-size:16px;color:#666">
            附件
        </div>
        <div style="margin-left:100px;margin-bottom:20px">
            <el-upload
                    class="upload-demo"
                    :file-list="fileList3" readonly="readonly" disabled>
                <!--<el-button size="small" type="primary">点击上传</el-button>-->
                <!--<div slot="tip" class="el-upload__tip">（支持word/excle/pdf格式，文件大小不能超过10M</div>-->
            </el-upload>

        </div>
        <el-form  label-position="labelPosition" label-width="100px">

            <el-form-item label="可读权限" >
                <!--<template>-->
                    <!--<el-radio class="radio" v-model="form.readability" label="1">游客</el-radio>-->
                    <!--<el-radio class="radio" v-model="form.readability" label="2">会员</el-radio>-->
                <!--</template>-->
                <div>
                    <span v-if="form.readability==1">游客</span>
                    <span v-else-if="form.readability==2">会员</span>
                </div>
            </el-form-item>

            <el-form-item label="视频地址" >
                <!--<el-input style="width:300px" v-model="form.video"></el-input>-->
                <div>{{form.video}}</div>
            </el-form-item>
            <el-form-item label="文章内容" >
                <!--<script id="editor" type="text/plain"></script>-->
                <div style="max-width:1200px" v-html="form.mainbody">
                    <!--<script id="editor" type="text/plain"></script>-->
                    <!--<script id="editor" type="text/plain"></script>-->
                    {{form.mainbody}}
                </div>
            </el-form-item>
            <el-form-item label="Keywords" >
                <!--<el-input style="width:300px" v-model="form.keywords"></el-input>-->
                <div>{{form.keywords}}</div>
            </el-form-item>
            <el-form-item label="Description" >
                <!--<el-input style="width:300px" v-model="form.description"></el-input>-->
                <div>{{form.description}}</div>
            </el-form-item>
        </el-form>
        <!--<div style="width:200px;margin:50px auto;"><el-button  type="primary" style="width: 200px">发布</el-button></div>-->
    </div>
</template>
<script>
    import _http from '@/components/common/http.vue'
    import _param from '@/components/common/param.vue'
//    import '@/assets/ueditor/ueditor.config.js'
//    import '@/assets/ueditor/ueditor.all.min.js'
//    import '@/assets/ueditor/ueditor.parse.min.js'
//    import '@/assets/ueditor/lang/zh-cn/zh-cn.js'
    export default {
        data() {
            return {
                lam:'',
                options2:[],
                id:'',
                fileList3:[],
                imageUrl: '',
                apiPort:{
///                    发布内容接口
                    fabuList:"activity/addActivity",
//                    回显接口
                    getBack:"article/findById",
//                    编辑上传接口
                    editUp:'article/updateArticle',
//                    栏目下拉
                    lanM:'article/findPrograma'
                },
                editor:null,
                fileUploadAction:_param.param.fileUploadUrl,
                userid:'',
                textarea:'',
                form:{
                    title:'',
                    content:'',
                    userid:'',
                    abstracts:'',
                    article_programa_id:'',
                    subtitle:'',
                    source:'',
                    readability:'',
                    video:'',
                    keywords:'',
                    description:''
                },
                activeName: 'second',
                labelPosition: 'right',
                dialogImageUrl: '',
                dialogVisible: false
            };
        },
        mounted(){
            this.userid=localStorage.getItem('userId')
            this.form.userid = localStorage.getItem('userId')
            this.id = this.$route.query.info
            var that = this
            this.getsele()

//            this.editor = UE.getEditor('editor');
            if(this.id!='n'){
                console.log(this.id)
                this.getBack(this.id)

            }
//            this.lan()
            this.dd()
        },
//        destroyed() {
//            this.editor.destroy();
//        },
        methods: {
            getsele(){
                var that = this
                var params = that.querystring.stringify({userid:that.userid})
                _http.axiosRequest(that,that.apiPort.lanM,params,(res)=>{
                    console.log(res.data.data.filemanage)
                that.options2=res.data.data.articlePrograma
            })
            },
            addAr(){
                this.form.mainbody=this.editor.getContent()
//                this.form.
                var that = this
                var params = that.querystring.stringify(this.form)
                _http.axiosRequest(that,that.apiPort.fabuList,params,(res)=>{
                    if(res.data.code==100){
                    that.$message({
                        message: '文章新增成功',
                        type: 'success'
                    });
                }else{
                    that.$message({
                        message:res.data.msg,
                        type: 'warning'
                    });
                }
            })
            },
            editAr(){
//                console.log(this.form)
//                console.log(this.form.start_time)
                this.form.mainbody=this.editor.getContent()
                var that = this
                var params = that.querystring.stringify(this.form)
                _http.axiosRequest(that,that.apiPort.editUp,params,(res)=>{
                    console.log(res)
                if(res.data.code==100){
                    that.$message({
                        message: '文章编辑成功',
                        type: 'success'
                    });
                }else{
                    that.$message({
                        message:res.data.msg,
                        type: 'warning'
                    });
                }
            })
            },
            //            获取回显内容
            getBack(id){
                var that = this
                var params = that.querystring.stringify({'id':id,'userid':this.form.userid})
                _http.axiosRequest(that,that.apiPort.getBack,params,(res)=>{
                    console.log(res)
                that.form.title = res.data.data.title
                that.form.abstracts=res.data.data.abstracts
                that.form.article_programa_id=res.data.data.article_programa_id
                that.form.subtitle=res.data.data.subtitle
                that.form.source=res.data.data.source
                that.form.readability=res.data.data.readability
                that.form.video=res.data.data.video
                that.form.keywords=res.data.data.keywords
                that.form.description=res.data.data.description
                that.form.mainbody=res.data.data.mainbody
//                that.editor.setContent(res.data.data.mainbody)
                that.imageUrl = res.data.data.picture
                if(res.data.data.attachment!=null){
                    that.fileList3=[{name:'附件',url:res.data.data.attachment}]
                }

            })
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            dd(){
                var that = this
                setTimeout(function(){
                    that.lan()
                },500)
            },
            go(){
//                router.go({name: 'fabu', params: {userId: 1}});
                this.$router.go(-1)
            },
            handleRemove(file, fileList) {
                console.log(file);
                console.log(fileList);
            },
            handlePictureCardPreview(file,fileList) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
                console.log(file.response)
            },
            success(response,file,fileList){
                console.log(response)
                console.log(file.url)
                this.form.attachment=file.url
                console.log(fileList)
            },
            remove(file,fileList){
                console.log('remove')
                console.log(fileList)
                this.fileList3=[]
                this.form.attachment=''

            },
            lan(){
                var that = this
                for(var i in that.options2){
                    console.log(that.options2[i])
                    if(that.options2[i].id==that.form.article_programa_id){
                        that.lam=that.options2[i].value
                    }
                }
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                console.log(file.url)
//                this.
            },
            beforeAvatarUpload(file) {
//                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 3;

                if (!(file.type == 'image/jpeg'||file.type == 'image/png')) {
                    this.$message.error('图片只能是 JPG或者PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('图片大小不能超过 3MB!');
                }
                return isLt2M&&(file.type == 'image/jpeg'||file.type == 'image/png');
            },
            handleChange(file, fileList) {
                this.fileList3 = fileList.slice(-1);
                this.form.attachment=file.url
            },
            err(){
                this.$message.error('上传失败');
            },
            beforeAvatarUpload1(file) {
//                application/vnd.openxmlformats-officedocument.wordprocessingml.document
//                application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
//                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 10;
                console.log(file.type)

                if (!(file.type == 'application/pdf'||file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'||file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document')) {
                    this.$message.error('上传文件只能是word/excle/pdf 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传文件大小不能超过 10MB!');
                }
                return isLt2M&&(file.type == 'application/pdf'||file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'||file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');
            }
        }
    };
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>